/**
 * 将base64格式的字符串转化为二进制的Blob对象
 *
 * @param {string} base64Buf - base64格式的字符串
 * @return {Blob} - 返回的Blob对象
 */
export function dataURLtoBlob(base64Buf: string): Blob {
  // 将base64字符串分割为两部分
  const arr = base64Buf.split(',');
  // 取出mime类型
  const typeItem = arr[0];
  /**
    (.*?) 是一个捕获组，用于匹配并捕获尽可能少的任何字符：
    . 表示任意单个字符（除了换行符）。
    * 表示 0 次或多次匹配前面的表达式。
    ? 使 * 的贪婪模式变为非贪婪模式，即尽可能少地匹配字符。
   */
  const mime = typeItem.match(/:(.*?);/)![1];

  // 解码base64
  const bstr = window.atob(arr[1]);
  let n = bstr.length;
  // 初始化一个新的Uint8Array对象
  const u8arr = new Uint8Array(n);
  // 将解码后的字符串转化为字节序列
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  // 将字节序列转化为Blob对象
  return new Blob([u8arr], { type: mime });
}

/**
 * 将图片URL转化为base64编码
 *
 * @param {string} url - 图片的url
 * @param {string} mineType - 图片的mime类型，默认为'image/png'
 * @return {Promise<string>} - 返回一个base64编码的字符串
 */
export function urlToBase64(url: string, mineType?: string): Promise<string> {
  return new Promise((resolve, reject) => {
    // 创建一个canvas对象
    let canvas = document.createElement('CANVAS') as Nullable<HTMLCanvasElement>;
    const ctx = canvas!.getContext('2d');

    const img = new Image();
    //设置跨域属性（img.crossOrigin = ''），允许加载跨域图片
    img.crossOrigin = '';
    //为Image对象定义一个 onload 事件处理函数，该函数将在图片加载完成后执行
    img.onload = function () {
      if (!canvas || !ctx) {
        return reject();
      }
      // 将图片的高度和宽度设为canvas的高度和宽度
      canvas.height = img.height;
      canvas.width = img.width;

      // 在canvas上绘制图片
      ctx.drawImage(img, 0, 0);

      // 将 canvas 上的图像转换为一个DataURL（即Base64编码的字符串)
      const dataURL = canvas.toDataURL(mineType || 'image/png');
      canvas = null;

      // 将data URL的base64字符串返回
      resolve(dataURL);
    };
    // 设置 Image 对象的 src 属性为提供的图片URL，这将启动图片的加载过程。一旦图片加载完成，onload 事件处理函数就会执行，
    // 转换过程随之开始。如果图片加载失败（例如URL无效或网络错误），则 onload 事件不会被触发，也可能需要一个 onerror 事件处理函数来处理这种情况并调用 reject。
    img.src = url;
  });
}
